<script setup>
import { ref, onMounted, inject } from "vue";
import { useRoute } from "vue-router";
import { MdPreview } from "md-editor-v3";
import dayjs from "dayjs";
import { ElMessage } from "element-plus";
import "md-editor-v3/lib/style.css";
import { ArrowLeft } from "@element-plus/icons-vue";

const route = useRoute();
const article = ref(null);
const loading = ref(true);

const axios = inject("axios");

onMounted(() => {
  console.log("route", route.path);

  fetchArticle(route.path);
});

const fetchArticle = async (path) => {
  try {
    const res = await axios.get(path);
    loading.value = false;
    console.log("res", res);
    article.value = res.data.data;

    // test: 测试文章详情显示内容

    //     article.value.content = `一、戴尔笔记本操作方法
    // 声明：本文的戴尔系列以戴尔 G 系列为例，在戴尔 G 系列上可以看到左上角的 ESC 处有一个小锁的图标里面是 Fn 。

    // 方法：使用组合键 Esc + Fn 即可达成 开启/关闭 Fn 热键的效果。

    // 二、联想笔记本操作方法
    // 声明：本文的戴尔系列以联想小新系列为例，在联想小新系列上想要关闭 Fn 热键需要先重启电脑，在电脑启动时按 F2 键进入 BIOS 系统中设置。

    // 方法：重启电脑 / 开启电脑 -> 多次单击 F2 直至根据 setup 提示进入BIOS -> Configuration -> 修改 HotKey Mode 为 Enabled / Disabled 即可 开启 / 关闭 Fn 热键 （BIOS语言为English）

    // Enabled : 使用热键  Disabled : 不适用热键

    // 若BIOS语言为中文：进入BIOS -> 配置 -> 热键模式 -> 启用 / 不启用 （按 Enter 即可弹出修改对话框）

    // 设置完毕后按 F10 Saving Changes (保存修改）重新进入系统即可关闭热键了

    // 如图所示

    // 三、惠普笔记本操作方法
    // 声明：本文的惠普以轻薄本为例，在惠普轻薄本上可以看到左侧的 Shift 处有一个小字为 fn lock 即为 Fn 锁。

    // 方法：使用组合键 Shift + Fn 即可达成 开启/关闭 Fn 热键的效果。

    // 现在很多笔记本在出厂的时候都通过设置使得Fn不仅有针对操作系统的功能， 甚至还有其他的不同的功能如调节音量、开启/关闭键盘灯等，但是有时候打开后忘记如何关闭 Fn 热键导致烦恼， 那么本文希望可以帮助你解决你的问题！

    // 感谢您的阅读，资源有限， 读者如有机型不同的方法欢迎评论，作者看到后也会积极补充！！`;
  } catch {
    loading.value = false;
    ElMessage.error("获取文章失败");
  }
};
</script>

<template>
  <div class="article-page">
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else>
      <el-button class="back-button" :icon="ArrowLeft" @click="$router.back()"
        >返回</el-button
      >
      <div class="article-container">
        <div class="article-header">
          <h1 class="article-title">{{ article.title }}</h1>
          <div class="article-meta">
            <span> 作者: {{ article.author }} </span>
            <span class="time-info"
              >创建时间:
              {{
                dayjs(article.createdAt).format("YYYY年MM月DD日 HH:mm")
              }}</span
            >
            <span class="time-info"
              >更新时间:
              {{
                dayjs(article.updatedAt).format("YYYY年MM月DD日 HH:mm")
              }}</span
            >
          </div>
          <div class="article-desc">
            {{ article.describe }}
          </div>
        </div>
        <div class="article-content">
          <MdPreview editorId="read-only" :modelValue="article.content" />
          <!-- <MdEditor 
          v-model="article.content"
          previewOnly
        /> -->
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.article-page {
  width: 100%;
  max-width: 900px;
  margin: 10px auto 0;
  padding: 0 20px;
}

.back-button {
  position: fixed; /* 关键：相对视口固定 */
  left: 12%;
}

.loading {
  text-align: center;
  padding: 50px 0;
  font-size: 1.2rem;
  color: #666;
}

.article-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 30px;
}

.article-header {
  margin-bottom: 30px;
  text-align: center;
}

.article-title {
  font-size: 2rem;
  margin-bottom: 15px;
  color: #333;
}

.article-meta {
  display: flex;
  justify-content: center;
  gap: 20px;
  color: #888;
  font-size: 0.9rem;
  margin-bottom: 15px;
}

.article-desc {
  font-size: 1.1rem;
  color: #555;
  line-height: 1.5;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.article-content {
  line-height: 1.6;
  color: #333;
}
</style>
